*{margin: 0 auto;padding: 0 auto;list-style: none;}
a{text-decoration: none;}
body{font: normal 12px/1.5 'Microsoft Yahei',Helvetica,arial,sans-serif;margin-bottom: 100px;}
//网站上部开始
header{
//  顶部区域开始
//灰条区域
    #top_bar{
        height: 34px;width:100%;background:#fafafa ;line-height: 34px;
        color: @color;border-bottom: 1px solid #fafafa;@color:#9a9a9a;
        .top_center{
            width: 1200px;line-height: 34px;height: 34px;
            .fl{display: inline;float: left;}
            .fr{display: inline;float: right;}
            .top_site a{padding-left: 15px;color: @color;}
            .top_user{
                margin-left: 20px;padding-left: 20px;
                a{color: @color;}
            }
            .top_nav a{color: @color;}
        }
    }
//  长图广告
    #pic{
        width: 100%;height: 75px;position: relative;background: url(../img/160720093200524938.jpg)
        no-repeat center center;display: block;
        }
//      顶部区域结束
//  头部栏开始
    #head_bar{
        width: 100%;height: 90px;position: relative;background: #f1f1f1;padding-top: 30px;
        .h_center{
            width: 1200px;
            .fl{display: inline;float: left;}
            .fr{display: inline;float: right;}
//          logo
            .headbar_logo{
                position: relative;
                img{width: 220;height: 50px;}
            }
            .headbar_slogan{position: relative;margin-left: 20px;top: -5px;}
//          中间搜索
            .headbar_search{ 
                position: relative;margin-left: 30px;
                .search_box{
                    height: 40px;
                    .search_input{
                        width: 350px;height: 40px;line-height: 40px;margin-left: 3px;font-size: 14px;
                        padding: 0 15px ;border: none;
                    }
                    .search_btn{
                        display: block;width: 100px;height: 40px;line-height: 40px;text-align: center;
                        font-size: 16px;letter-spacing: 5px;color: #fff;background: #ea4234;
                    }
                }
                .search_words{
                        color: #919090;padding-top: 5px;a{color: #919090; &:hover{color: #EA4234;}}   
                }                                  
            }
//          购物车
            .buy_car_box{
                position: relative;
                .my_car{
                    cursor: pointer;width: 96px;height: 38px;line-height: 38px;
                    border: 1px solid #e0e0e0;background: red;position: relative;
                    background-image: url(../img/buycar.png);
                    background-repeat: no-repeat;background-color: #fbfbfb;background-position: 14px 10px;
                    padding-left: 44px;font-size: 16px;color: #565656;
    //               
                .silder{
                    width: 8px;height: 20px;line-height: 20px;color: #fff;position: absolute;
                    top: -11px;left: 40px;padding-left: 7px;
                    background: url(../img/dxt_left_bg1.png) no-repeat;
                    b{
                        position: absolute;left: 8px;top: 0;height: 19px;
                        background: url(../img/dxt_right_bg2.png) no-repeat right top;
                        padding-right: 7px;
                    }
                }
            }
                .car_empty{
                    text-align: center;position: absolute;top: 38px;left: -169px;width: 309px;
                     height: 86px;line-height: 86px;background: #fff;border: 1px solid #e0e0e0;
                    display: none;z-index: 10;
                    }
                    &:hover .car_empty{display: block;}
                .car_cont{
                    display: none;background: #fff;width: 309px;position: absolute;top: 38px;
                    left: -169px;border: 1px solid #e0e0e0;z-index: 99;
                    }    
            }
            
            
        }
    } 
//头部栏结束
//导航条开始
    #nav_bar{
        background: #2c2c2c;height: 45px;line-height: 45px;font-size: 18px;position: relative;
        overflow: hidden;
        .nav_center{
            width: 1200px;overflow: hidden;
            .navbar_list{
                overflow: hidden;padding: 0px;
                 .item{
                    float: left;position: relative;cursor: pointer;
                    .link{color: white;padding: 0px 20px;}
                }
                .on{background:#ea4234;}
            }
           
        }
    }
//导航条结束
}
// 网站上部结束
//中间大图轮播区域开始  
#center{
    background: url(../img/di78tu.png) no-repeat top center;
    .img_center{
        width: 1200px;height: 423px;
        .home_wrap{
            padding-top: 15px;overflow: hidden;position: relative;
            .fl{display: inline;float: left;}
            .home_nav{
                width: 238px;border: 1px solid #eee;border-bottom: none;position: relative;z-index: 99;
                .nav_head{
                    height: 50px;line-height: 50px;padding: 0px 20px;font-size: 16px;
                    background: url(../img/icon18.png) no-repeat 250px center;
                    border-bottom: 1px solid #eee;font-weight: bold;
                }
//              左侧菜单
                .nav_list{
                    .bar{
                        &:hover .nav_page{display: block}
                    }
                    padding: 0;
                    .bar .nav_title{
                    border-bottom: 1px solid #eee;height: 50px;line-height: 50px;padding-left: 45px;
                    font-size: 16px;cursor: pointer;
                        &:hover{
                            color: #fff;
                        }
                    }
                    .type1{
                        background: url(../img/icon19.png) no-repeat 15px center;
                        &:hover{background:#ea4234 url(../img/icon001.png)no-repeat 15px center;}
                    }
                    .type2{
                        background: url(../img/icon009.png) no-repeat 15px center;
                        &:hover{background:#ea4234 url(../img/icon002.png)no-repeat 15px center;}
                    }
                    .type3{
                        background: url(../img/icon010.png) no-repeat 15px center;
                        &:hover{background:#ea4234 url(../img/icon003.png)no-repeat 15px center;}
                    }
                    .type4{
                        background: url(../img/icon012.png) no-repeat 15px center;
                        &:hover{background:#ea4234 url(../img/icon005.png)no-repeat 15px center;}
                    }
                    .type5{
                        background: url(../img/icon013.png) no-repeat 15px center;
                        &:hover{background:#ea4234 url(../img/icon006.png)no-repeat 15px center;}
                    }
                    .type6{
                        background: url(../img/icon014.png) no-repeat 15px center;
                        &:hover{background:#ea4234 url(../img/icon007.png)no-repeat 15px center;}
                    }
                    .type7{
                        background: url(../img/icon015.png) no-repeat 15px center;
                        &:hover{background:#ea4234 url(../img/icon008.png)no-repeat 15px center;}
                    }
//                  二级菜单隐藏页
                    .bar .nav_page{
                        border: 1px solid #ea4234;position: absolute;top: -1px;left: 238px;
                        width: 490px;height: 407px;background: #fff;display: none;z-index: 99;
                        overflow: hidden;
                        .nav_container{
                            position: relative;height: 100%;padding: 0px 15px;
                            .nav_name{
                                height: 50px;line-height: 50px;border-bottom: 1px solid #eee;
                                font-size: 16px;font-weight: bold;
                            }
                            .nav_type .item{
                                float: left;padding-top: 20px;width: 25%;font-size: 14px;
                                white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
                                a{color: #666;}
                            }
                            .nav_img{
                                position: absolute;left: 0px; bottom: 0px;width: 100%;z-index: 200;
                                opacity: 0.5;
                                &:hover{opacity: 1;}
                            }
                        }
                    }
                }
               
            }
            .big_img{
                width: 957px;height: 409px;position: absolute;
                left: 240px;
                img{position: absolute;top: 0px;left: 0px;display: none;width: 957px;height: 409px;}
                img:nth-child(1){display: block;}
                #ul{
                    width: 300px;height: 20px;position: absolute;bottom: 20px;left: 350px;
//                  background: yellow;
                    li{
                        float: left;width: 20px;height: 20px;border-radius:50%;margin-right: 8px;
                        background: #ccc; cursor: pointer;                  
                    }
                    li:nth-child(1){
                        background:red ;
                    }
                }
                #btn{
                    height: 104px;width:957px;position: absolute;top: 175px;
                    #btn_l{
                        width: 50px;height: 104px;background: url(../img/ui1.png) no-repeat 0px 0px;
                        cursor: pointer;float: left;position: relative;
                        span{width: 50px;height: 104px;position: absolute;background: black;
                        opacity: 0.2;}
                    }
                    #btn_r{
                        width: 50px;height: 104px;background: url(../img/ui1.png) no-repeat -50px 0px;
                        cursor: pointer;float: right;position: relative;
                        span{width: 50px;height: 104px;position: absolute;background: black;
                        opacity: 0.2;}
                    }
                }
            }
        }
    }
}
//中间大图轮播区域结束
//<!--主题馆区域-->
#brands{
    padding-top: 40px;width: 1210px;margin: 0px auto;height: 310px;
    .title{
        font-size: 22px;padding-bottom: 20px;font-weight: bold;
    }
    .brands_list{
        padding-bottom: 20px;
        .item{
            margin-right: 10px;width: 232px;float: left;height: 237px;overflow: hidden;
            position: relative;
            .link{
                display: block; width: 100%;height: 100%;position: absolute;left: 0px;
                top: 0px;z-index: 15;
            }
            .img{
                position: absolute;left: 0;bottom: 0px;width: 232px;height: 175px;z-index: 5;
                transition: all 0.5s ease;-webkit-transition: all 0.5s ease;
            }
            &:hover .img{-webkit-transform: translate3d(0px,-10px,0px);}
            .name{
                position: absolute;left: 0;bottom: 0px;width: 232px;height: 68px;z-index: 10;
            }        
        }
        .ap{
            background: url(../img/brand1.png) no-repeat -2px 0px;
            .img{
                background: url(../img/brand12.png) no-repeat -2px 0px;
            }
            .name{
                background: url(../img/brand11.png) no-repeat -2px 0px;
            }
        }
        .ss{
            background: url(../img/brand2.png) no-repeat -2px 0px;
             .img{
                background: url(../img/brand22.png) no-repeat -2px 0px;
            }
            .name{
                background: url(../img/brand21.png) no-repeat -2px 0px;
            }
        }
        .mi{
            background: url(../img/brand3.png) no-repeat -2px 0px;
             .img{
                background: url(../img/brand32.png) no-repeat -2px 0px;
            }
            .name{
                background: url(../img/brand31.png) no-repeat -2px 0px;
            }
        }
        .mz{
            background: url(../img/brand4.png) no-repeat -2px 0px;
             .img{
                background: url(../img/brand42.png) no-repeat -2px 0px;
            }
            .name{
                background: url(../img/brand41.png) no-repeat -2px 0px;
            }
        }
        .hw{
            background: url(../img/brand5.png) no-repeat -2px 0px;
             .img{
                background: url(../img/brand52.png) no-repeat -2px 0px;
            }
            .name{
                background: url(../img/brand51.png) no-repeat -2px 0px;
            }
        }
    }
}
//<!--主题馆区域-->
//<!--中部主要区域-->
#center{
    .goods{
        background: #f4f7fa;margin-top: 15px;
//       <!--商品专区-->
        .goods_1200{
            width: 1200px;margin: 0px auto;
            .goods_floor{
                padding-top: 30px;
//              专区名称
                .floor_name{
                    position: relative;
                    .floor_title{
                        font-size: 22px;font-weight: bold;
                    }
                }
//              产品列表
                .goods_list{
                    padding-top: 10px;overflow: hidden;margin-bottom: 20px;
//                  左侧广告
                    .goods_ad{
                        float: left;width: 230px;overflow:hidden;border: 1px solid #eee;
                        margin-right: 10px;transition: all 0.2s linear;
                        -webkit-transition: all 0.2s linear;
                        &:hover{
                            box-shadow: 0px 15px 30px #e3e3e3;
                            -webkit-transform: translate3d(0px,-2px,0px);
                        }
                    }
//                  右侧商品
                    .goods_tab{
                        overflow: hidden;margin: 0;
                        .goods_ul{
                            width: 950px;float: right;overflow: hidden;display: block;padding-left: 0px;
                            .goods_li{
                                margin-right: 10px;margin-bottom: 10px;
                                padding: 20px 20px;margin-top: 2px;
                                border: 1px solid #eee;background: #fff;height: 254px;
                                transition: all 0.2s linear;position: relative;
                                -webkit-transition: all 0.2s linear;float: left;
                                width: 185px;
                                &:hover{
                                    box-shadow: 0px 15px 30px #e3e3e3;
                                    -webkit-transform: translate3d(0px,-2px,0px);
                                    border: 1px solid red;
                                }
                                .name{
                                    font-size: 14px;overflow: hidden;padding-top: 25px;
                                    height: 42px;line-height: 21px;
                                    a{
                                        text-decoration: none;color: #666;
                                    }
                                }
                                .info{
                                    color: #ea4234;white-space: nowrap;overflow: hidden;
                                    text-overflow: ellipsis;padding-top: 3px;height: 18px;
                                }
                                .price{
                                    padding-top: 6px;
                                    .nowprice{
                                        color: #df303f;font-weight: bold;
                                    }
                                }   
                            }
                        }
                    }
                }
            }
//          配件专区
            #parts{
                .goods_ad{float: right;}
                .goods_ul{float: left;}
            }
            //          配件专区                              
        }
//       <!--商品专区-->
    }
}
//<!--中部主要区域-->
//<!--底部区域-->
#foot_box{
    width: 100%;min-width: 1210px;margin: 0 auto;height: 150px;background: #999999;
    .foot_center{
        width: 1210px;margin: 0 auto;overflow: hidden;position: relative;color: white;
        .friend{
                margin-top: 25px;margin-bottom: 14px;height: 12px;
                dt{color: white;margin-bottom: 10px;float: left;margin-right: 10px;}
                .fl{
                    float: left;border-right: 1px solid white;padding-left: 10px;padding-right: 10px;
                    a{
                        color: white;
                    }
                }
        }
        p{margin-top: 10px;text-align: left;}
    }
}
//<!--底部区域-->
                   